<template>
  <a-drawer
      v-model:open="isShow"
      class="custom-class"
      title="角色权限配置"
      size="large"
      placement="right"
      @close="close"
  >
    <a-tree
        v-model:expandedKeys="expandedKeysss"
        v-model:selectedKeys="defaultCheckedKeys"
        v-model:checkedKeys="checkedKeys"
        checkable
        :checkStrictly="true"
        :tree-data="treeData"
    >
      <template #title="{ slotTitle }">
        {{ slotTitle }}
      </template>
    </a-tree>
    <template #footer>
     <div style="display: flex;align-items: center">
       <div>
         <a-dropdown>
           <template #overlay>
             <a-menu>
               <a-menu-item @click="checkedKeys = allTreeKeys">
                 全部勾选
               </a-menu-item>
               <a-menu-item @click="checkedKeys = []">
                 取消全选
               </a-menu-item>
               <a-menu-item @click="expandAll">
                 展开所有
               </a-menu-item>
               <a-menu-item @click="expandedKeysss = []">
                 合并所有
               </a-menu-item>
             </a-menu>
           </template>
           <a-button>
             树操作
             <UpOutlined />
           </a-button>
         </a-dropdown>
       </div>
       <div style="margin-left: auto">
         <a-button @click="close" style="margin-right: 5px">取消</a-button>
         <a-button type="primary" ghost style="margin-right: 5px" :loading="loading" @click="save(false)">保存</a-button>
         <a-button type="primary" @click="save(true)" :loading="loading">保存并关闭</a-button>
       </div>
     </div>
    </template>
  </a-drawer>
</template>
<script setup>
import {computed, onMounted, ref} from "vue";
import {queryRolePermission, queryRoleTreeList} from "@/api/system/index.js";
import {message} from "ant-design-vue";
import {saveRolePermission} from "@/api/system/role.js";
const props = defineProps({
  openRolePermissionDrawer: {
    type: Boolean,
    default: false
  },
  id:{
    type: String,
    default: ''
  }
})
const emit = defineEmits(['close'])
const isShow = computed(() => {
  return props.openRolePermissionDrawer
})
const treeData = ref([])
const allTreeKeys = ref([])
const loading = ref(false)
const checkedKeys = ref([])
const defaultCheckedKeys = ref([])
const expandedKeysss = ref([])
/**
 * 初始化树形结构
 * @returns {Promise<void>}
 */
const init =  async () => {
  const res = await queryRoleTreeList({})
  let data = [];
  console.log(res)
  treeData.value = res.result.treeList;
  allTreeKeys.value = res.result.ids
  const appCodeIds = data.map(item => item.key);
  allTreeKeys.value = res.result.ids;
  const res2 = await queryRolePermission({roleId:props.id})
  checkedKeys.value = [...res2.result];
  defaultCheckedKeys.value = [...res2.result];
  expandedKeysss.value = [ ...allTreeKeys.value, ...appCodeIds ];
  expandedKeysss.value = allTreeKeys.value
}
/**
 * 关闭抽屉
 */
const close = () => {
  emit("close")
}
/**
 * 保存权限
 * @param exit
 */
const save = (exit) => {
  console.log(checkedKeys.value)
  let params =  {
    roleId:props.id,
    permissionIds:checkedKeys.value.checked ? checkedKeys.value.checked.join(",") : checkedKeys.value.join(","),
    lastpermissionIds:defaultCheckedKeys.value.join(","),
  };
  loading.value = true;
  console.log("请求参数：",params);
  saveRolePermission(params).then((res)=>{
    if(res.success){
      message.success(res.message);
      loading.value = false;
      if (exit) {
        close()
      }
    }else {
      message.error(res.message);
      loading.value = false;
      if (exit) {
        close()
      }
    }
    init();
  })
}
/**
 * 展开所有节点
 */
const expandAll = () => {
  expandedKeysss.value = allTreeKeys.value
}
onMounted(() => {
  init()
})
</script>
<style scoped>

</style>
